<script>
import MyButton from './components/MyButton.vue';
import { shallowReactive } from 'vue';

export default {
    // data 用来指定实例对象中的响应式的属性
    data() {
        return {
            stu: {
                name: "孙悟空",
                age: 18,
                gender: "男",

            },
            firstName:"悟空",
            lastName:"孙",
            // 数组也是响应式数据
            arr:["孙悟空","猪八戒","沙和尚"]
        }
    },
    /* 
        methods中的方法每次组件重新渲染都会调用
    */
    methods: {
        update() {
            if (this.stu.age >= 18) {
                this.stu.age = 17

            } else {
                this.stu.age = 18
            }
        }
    },
    /* 
        computed 用来指定计算属性
        {
            属性名：getter
        }

        -计算属性，只在其依赖数据发生变化时才会重新执行
        -会对数据进行缓存
    */
    computed: {
        // 在计算属性的getter中，尽量只做读取相关的逻辑
        // 不要执行哪些会产生（负）作用的代码
        info() {
            return this.stu.age >= 18 ? "你是一个成年人2" : "你是一个未成年人2"
        },
        // 计算属性的简写（只有getter时）
        // name(){
        //     return this.lastName + this.firstName
        // }
        // 可以为计算属性设置setter ，使得计算属性可写（不建议）
        name:{
            get(){
                return this.lastName + this.firstName       

            },

            set(value){
                // set在计算属性被修改时调用
                this.lastName = value[0]
                this.firstName = value.slice(1)
            }

        }
    }

}
</script>

<template>
    <h2>{{ stu.name }} --{{ stu.gender }} --{{ stu.age }}</h2>
    <h2>
        评语：{{ info }}
    </h2>
    <button @click="update()">减龄</button>
    <hr>
    <h2>{{ lastName + firstName }}</h2>
    <hr>
    <h2>{{ arr[0] }}--{{ arr[1] }}--{{ arr[2] }}</h2>
</template>